import React from 'react'
import { Form, Row, Button, Select, Input, Col, Upload, Icon } from 'antd';
const FormItem = Form.Item;
const { Option } = Select
const SearchForm = ({ form: { getFieldDecorator, getFieldsValue, resetFields, setFieldsValue }, onSearch, onClick, onClick1, advanced, assemblyGroupList }) => {
    const cz = () => {
        if (onClick) {
            onClick();
        }
    };
    const advancedss = () => {
        if (onClick1) {
            onClick1();
        }
    }
    // const onChange = (value, type) => {
    //     setFieldsValue({ [type]: value })
    // }
    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        }
    };
    return (
        <Form className="search-form">
            <Row gutter={24}>
                <Col span={5}>
                    <FormItem label='班组代码:'{...formItemLayout}>
                        {/* 20220721 - 输入框改为带搜索下拉 */}
                        {/* {getFieldDecorator('groupCode')(
                            <Select placeholder='请选择班组代码'
                                allowClear
                                optionFilterProp="children"
                                showSearch
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            // onChange={(value) => onChange(value, 'groupName')} 
                            >
                                {
                                    assemblyGroupList.map(item => {
                                        return <Option key={item.groupCode}>{item.groupCode}</Option>
                                    })
                                }
                            </Select>
                        )} */}
                        {/* 20221011 - 带搜索下拉改为输入框 */}
                        {getFieldDecorator('groupCode', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(
                            <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='班组名称:'{...formItemLayout}>
                        {/* 20220721 - 输入框改为带搜索下拉 */}
                        {/* {getFieldDecorator('groupName')(
                            <Select placeholder='请选择班组名称'
                                allowClear
                                optionFilterProp="children"
                                showSearch
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            // onChange={(value) => onChange(value, 'groupCode')}
                            >
                                {
                                    assemblyGroupList.map(item => {
                                        return <Option key={item.groupCode}>{item.groupName}</Option>
                                    })
                                }
                            </Select>
                        )} */}
                        {/* 20221011 - 带搜索下拉改为输入框 */}
                        {getFieldDecorator('groupName', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(
                            <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                </Col>
                <Col span={5}>
                </Col>
                <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
                    <FormItem>
                        <Button type="primary" icon="search" onClick={() => onSearch(getFieldsValue())}>
                            {'查询'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => advancedss()}>
                            {' 展开'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type="default" onClick={() => {
                            cz()
                            resetFields()
                        }}
                            icon={'redo'}
                        >
                            {'重置'}
                        </Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    )
};
export default Form.create()(SearchForm);